/**
 * Created by zl206 on 2016/11/5.
 */
function drawSnake() {
    cxt.globalCompositeOperation="destination-over";
    drawSnakeHead.call(this);
    var snakeWidth=this.headSize;
    var temp=Math.floor(this.headSize/4);
    var miniR=temp*3/2;
    var pt=(this.headSize-miniR)/10;
    var length=this.points.length;
    for(var i = length-2 ; i !=-1  ; --i){
        if((length-2-i)%temp==0){
            var lastP=(i+1)/temp;
            if(lastP<10){
                snakeWidth-=pt;
            }
            if(this.points[i].x-wX<-this.headSize||this.points[i].x-wX>dW+this.headSize||this.points[i].y-wY<-this.headSize||this.points[i].y-wY>dH+this.headSize)
                continue;
            cxt.beginPath();
            var grd=cxt.createRadialGradient(this.points[i].x-wX,this.points[i].y-wY,snakeWidth/3,this.points[i].x-wX,this.points[i].y-wY,snakeWidth);
            grd.addColorStop(0,"white");
            grd.addColorStop(0.6,this.color);
            grd.addColorStop(1,"#000");
            cxt.fillStyle=grd;
            cxt.arc(this.points[i].x-wX,this.points[i].y-wY,snakeWidth,0,Math.PI*2);
            cxt.fill();
        }
    }
}

function drawSnake2() {
    cxt.globalCompositeOperation="destination-over";
    drawSnakeHead.call(this);
    var snakeWidth=this.headSize*2;
    var temp=1;
    var length=this.points.length;
    if (length-temp<0)return;
    var lastPoint=this.points[length-temp];
    for(let i = length-1 ; i>=0  ; i-=temp){
        let thisPoint=this.points[i];
        let centerPoint=centerOfTwoPoint(thisPoint,lastPoint);
        lastPoint=thisPoint;
        if(Math.floor(length-i)%Math.floor(snakeWidth/2.5)==0){
            cxt.fillStyle="#666";
            cxt.beginPath();
            cxt.arc(centerPoint.x-wX,centerPoint.y-wY,snakeWidth/2,0,2*Math.PI);
            cxt.fill();
        }
    }
    cxt.save();
    cxt.lineJoin="round";
    cxt.miterLimit=snakeWidth;
    cxt.lineWidth=snakeWidth;
    cxt.strokeStyle=this.color;
    cxt.beginPath();
    lastPoint=this.points[length-temp];
    var firstPoint=centerOfTwoPoint(this.head,lastPoint);
    cxt.moveTo(firstPoint.x-wX,firstPoint.y-wY);
    var isContinue=false;
    for(let i = length-1 ; i>=0  ; i-=temp){
        let thisPoint=this.points[i];
        if(thisPoint.x-wX<-2*snakeWidth||thisPoint.x-wX>dW+2*snakeWidth||thisPoint.y-wY<-2*snakeWidth||thisPoint.y-wY>dH+2*snakeWidth){
            if (!isContinue){
                isContinue=true;
                cxt.stroke();
            }
            lastPoint=thisPoint;
            continue;
        }else if(isContinue){
            isContinue=false;
            cxt.beginPath();
            let tempPoint=centerOfTwoPoint(lastPoint,thisPoint);
            lastPoint=thisPoint;
            cxt.moveTo(tempPoint.x-wX,tempPoint.y-wY);
            continue;
        }
        let centerPoint=centerOfTwoPoint(thisPoint,lastPoint);
        cxt.quadraticCurveTo(lastPoint.x-wX,lastPoint.y-wY,centerPoint.x-wX,centerPoint.y-wY);
        lastPoint=thisPoint;
    }
    cxt.stroke();
    cxt.restore();
}

function drawSnake3() {
    cxt.globalCompositeOperation="destination-over";
    drawSnakeHead.call(this);
    var snakeWidth=this.headSize;
    var temp=Math.floor(snakeWidth/4);
    var length=this.points.length;
    cxt.fillStyle=this.color;
    var isContinue=false;
    cxt.beginPath();
    for(let i = length-temp ; i >=0  ; i-=temp){
        let thisPoint=this.points[i];
        if(thisPoint.x-wX<-2*snakeWidth||thisPoint.x-wX>dW+2*snakeWidth||thisPoint.y-wY<-2*snakeWidth||thisPoint.y-wY>dH+2*snakeWidth){
            if (!isContinue){
                isContinue=true;
                cxt.stroke();
            }
            continue;
        }else if(isContinue){
            isContinue=false;
            cxt.beginPath();
        }
        if((length-i)/temp%20<10){
            changeColorAndStroke(this.color);
        }else{
            changeColorAndStroke("#ffffff");
        }
        cxt.arc(thisPoint.x-wX,thisPoint.y-wY,snakeWidth,0,Math.PI*2);

    }
    if(!changeColorAndStroke(this.color))
        changeColorAndStroke("#ffffff");
}

function drawSnake4() {
    cxt.globalCompositeOperation="destination-over";
    drawSnakeHead.call(this);
    var snakeWidth=this.headSize;
    var temp=Math.floor(snakeWidth/3);
    var length=this.points.length;
    cxt.fillStyle=this.color;
    cxt.beginPath();
    for(let i = length-temp ; i >=0  ; i-=temp){
        if(this.points[i].x-wX<-snakeWidth||this.points[i].x-wX>dW+snakeWidth||this.points[i].y-wY<-snakeWidth||this.points[i].y-wY>dH+snakeWidth){
                continue;
        }
        if((length-i)/temp%2<1){
            changeColorAndFill(this.color);
        }else{
            changeColorAndFill("#ffffff");
        }
        cxt.beginPath();
        cxt.arc(this.points[i].x-wX,this.points[i].y-wY,snakeWidth,0,Math.PI*2);
        cxt.fill();
    }
}

function changeColorAndStroke(color) {
    if (cxt.strokeStyle==color||!color)return false;
    cxt.stroke();
    cxt.strokeStyle=color;
    return true;
}

function changeColorAndFill(color) {
    if (cxt.fillStyle==color||!color)return false;
    cxt.fillStyle=color;
    return true;
}


function drawOtherSnakes(snakes){

    for(let i in snakes){
        let snake=snakes[i];
        switch (snake.style){
            case 0:
                drawSnake.call(snake);
                break;
            case 1:
                drawSnake2.call(snake);
                break;
            case 2:
                drawSnake3.call(snake);
                break;
            case 3:
                drawSnake4.call(snake);
                break;
        }
    }
}

function setCenter() {
    for(let i in othersnakes) {
        let snake = othersnakes[i];
        if (snake.id != mysnake.id) {
            continue;
        }
        rate=snake.headSize/50;
        if(rate<1){
            rate=1;
            dW=width;
            dH=height;
        }else  if(rate>1&&rate<2){
            dW=width*rate;
            dH=height*rate;
        }else if(rate>2){
            rate=2;
            dW=width*2;
            dH=height*2;
        }
        wX=snake.head.x-dW/2;
        wY=snake.head.y-dH/2;
        break;
    }
}

function drawSnakeHead() {
    cxt.save();
    cxt.translate(this.head.x-wX,this.head.y-wY);
    cxt.rotate(this.angle-Math.PI/2);
    cxt.drawImage(heads[this.img],-this.headSize,-this.headSize,2*this.headSize,2*this.headSize);
    cxt.restore();
}


function centerOfTwoPoint(p1, p2) {
    return {x:(p1.x+p2.x)/2,y:(p1.y+p2.y)/2};
}